<template>
  <div class="banner">
    <div class="form-contain">
      <el-header style="font-size: 20px; font-weight: bold">
        <i class="el-icon-aim" style="margin-right: 15px"></i>
        <span>报告列表</span>
      </el-header>
      <el-table :data="tableData" border style="width: 98%">
        <el-table-column  prop="task_name" label="任务名称" width="180">
        </el-table-column>
        <el-table-column prop="task_clock" label="任务计划" width="100">
        </el-table-column>
        <el-table-column prop="task_type" label="任务类型"> </el-table-column>
        <el-table-column prop="task_start" label="任务时间"> </el-table-column>
        <el-table-column prop="task_status" label="任务状态" width="180">
        </el-table-column>
        <el-table-column prop="task_report" label="报告状态" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
          <el-button
            size="mini"
            v-if="scope.row.task_report == '报告完成'"
            @click="read(scope.row.task_name)">读取报告</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
      <div style="clear: both"></div>
    </div>
      <div style="clear: both"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      tableData: [],
      selected: '',
    }

    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
    }
  },
  mounted(){
    const url = 'http://localhost:5000/report_list'
    axios.get(url).then(response => {
      const result = response.data
      this.tableData = result.tableData
    })
  },
  methods: {
    read(e){
      console.log(e)
      JSON.stringify(e)
      axios.post('http://localhost:5000/vuln_select_task_result',{'name':e})
        .then((response) => {
          console.log(response)
        })
        .catch((error) => {
          console.log(error)
        })
      this.$router.replace('/item')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
  },
}
</script>

<style lang="scss" scoped>
.el-header {
  background-color: rgba(51, 48, 51, 0.219);
  color: #333;
  line-height: 60px;
}

.form-contain {
  border: 1px solid rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 5px;
}

.block {
  float: right;
  margin: 10px;
}

/* reset element-ui css */

.el-table {
  margin: 12px;

  .el-table-column {
    text-align: center;
  }
}
</style>
